<!DOCTYPE html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Aiiiss-aps</title>
    <link rel="stylesheet" href="../../codebase/dhtmlxgantt.css?v=7.0.7">
    <link rel="stylesheet" href="../../codebase/reset.css">
    <link rel="stylesheet" href="../common/controls_styles.css?v=7.0.7">
    <link rel="stylesheet" href="../../bootstrap-4.5.0/css/bootstrap.css">
    <link rel="shortcut icon" href="../../img/aiiiss.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../../iconfont/iconfont.css">


    <script src="../common/data_extra.js?v=7.0.7"></script>
    <script src="../../jquery/jquery-3.5.1.min.js"></script>
    <script src="../../codebase/dhtmlxgantt.js?v=7.0.7"></script>
    <script src="../../bootstrap-4.5.0/js/bootstrap.min.js"></script>
    <script src="../../codebase/locale/locale_cn.js"></script>
    <script src="../../iconfont/iconfont.js"></script>
    <script src="../../common/js/api.js"></script>


    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/css/bootstrap-select.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.9/js/bootstrap-select.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.9/js/i18n/defaults-zh_CN.min.js"></script>


    <style>

        html, body {
            height: 100%;
            padding: 0px;
            margin: 0px;
            overflow: hidden;
        }

        .deadline {
            position: absolute;
            border-radius: 12px;
            border: 2px solid #585858;
            -moz-box-sizing: border-box;
            box-sizing: border-box;

            width: 22px;
            height: 22px;
            margin-left: -11px;
            margin-top: 6px;
            z-index: 1;
            background: url("common/deadline_icon.png") center no-repeat;
        }

        .overdue-indicator {
            width: 16px;
            margin-top: 4px;
            height: 16px;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border-radius: 12px;
            color: white;
            background: rgb(255, 60, 60);
            line-height: 17px;
            text-align: center;
            font-size: 16px;
        }

        .suspend-indicator {
            width: 16px;
            margin-top: 4px;
            height: 16px;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border-radius: 12px;
            color: white;
            background: rgb(255, 165, 0);
            line-height: 17px;
            text-align: center;
            font-size: 16px;
        }

        .header_control {
            text-align: left;
            padding-left: 20px;
        }

        .add {
            background-image: url();
            width: 18px;
            cursor: pointer;
        }


        .icon {
            width: 30px;
            height: 30px;
            vertical-align: -0.15em;
            /*fill: currentColor;*/
            overflow: hidden;
        }

        .control {
            height: 50px;
            background-color: #DDDDDD;
            align-items: center;
            display: flex;
        }

        .funct_area {
            list-style-type: none;
            overflow: hidden;
            display: flex;
            margin: 0;
        }

        .funct_area li {
            list-style-type: none;
            width: 30px;
            height: 30px;
            line-height: 30px;
            margin: 0 5px;
        }

        .bs-example {
            margin: 0 0 0 10px;
        }

        .banner {
            margin: 0 0 0 10px;
        }

        .list-group-item-expand {
            padding: 0 0 0 5px;
            font-size: 12px;
        }

        .min-icon {
            width: 12px;
            height: 12px;
            vertical-align: -0.15em;
            /*fill: currentColor;*/
            overflow: hidden;
        }
    </style>


</head>

<body>
<div id="myCover">
    <div class="banner">
        <div class="pic">
            <img src="../../img/logo-small.png" width="50" height="50">
            <span>Aiiiss-APS 排程优化引擎</span>
        </div>
    </div>
    <!--排产,人资源分布,设备资源分布,理论与实绩,排班,资源设定,资源组设定,工艺,工序-->
    <div class="bs-example">

        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active" id="aps_tab" data-toggle="tab" href="#aps" role="tab"
                   aria-controls="aps" aria-selected="true">排产</a>
                <a class="nav-item nav-link" id="usr_scheduler_tab" data-toggle="tab"  role="tab"
                   aria-selected="false" onclick="usrScheduler()">人资源分布</a>
                <a class="nav-item nav-link" id="device_scheduler_tab" data-toggle="tab" href="#device_scheduler"
                   role="tab"
                   aria-controls="device_scheduler" aria-selected="false">设备资源分布</a>
                <a class="nav-item nav-link" id="plan_act_tab" data-toggle="tab" href="#plan_act" role="tab"
                   aria-controls="plan_act" aria-selected="false">理论与实绩</a>
                <a class="nav-item nav-link" id="scheduler_tab" data-toggle="tab" href="#scheduler" role="tab"
                   aria-controls="scheduler" aria-selected="false">排班</a>
                <a class="nav-item nav-link" id="resource_setting_tab" data-toggle="tab" href="#resource_setting"
                   role="tab"
                   aria-controls="resource_setting" aria-selected="false">资源设定</a>
                <a class="nav-item nav-link" id="resource_group_setting_tab" data-toggle="tab"
                   href="#resource_group_setting" role="tab" aria-controls="resource_group_setting"
                   aria-selected="false">资源组设定</a>
                <a class="nav-item nav-link" id="craft_tab" data-toggle="tab" href="#craft" role="tab"
                   aria-controls="craft"
                   aria-selected="false">工艺</a>
                <a class="nav-item nav-link" id="goods_bom_tab" data-toggle="tab" href="#goods_bom" role="tab"
                   aria-controls="goods_bom" aria-selected="false">工序</a>
            </div>
        </nav>
        <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade show active" id="aps" role="tabpanel" aria-labelledby="aps_tab">


                <div>
                    <div class="control">
                        <ul class="funct_area">
                            <li onclick="chooseOrder()">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-xuanze"></use>
                                </svg>
                            </li>
                            <li onclick="start()">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-kaishi-default"></use>
                                </svg>
                            </li>
                            <li onclick="end()">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-mianicon"></use>
                                </svg>
                            </li>
                            <li onclick="zoomIn()">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-zoomin"></use>
                                </svg>
                            </li>
                            <li onclick="zoomOut()">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-zoomout"></use>
                                </svg>
                            </li>
                            <li onclick="fullScreen()">
                                <svg class="icon" aria-hidden="true" id="fullScreenSvg">
                                    <use xlink:href="#icon-quanping"></use>
                                </svg>
                            </li>
                        </ul>
                    </div>
                    <div id="gantt_here" style='width:100%; height:calc(100vh - 52px);'></div>
                </div>

                <!-- 模态框 -->
                <div class="modal fade" id="myModal">
                    <div class="modal-dialog">
                        <div class="modal-content">

                            <!-- 模态框头部 -->
                            <div class="modal-header">
                                <h4 class="modal-title">模态框头部</h4>
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                            </div>

                            <!-- 模态框主体 -->
                            <div class="modal-body">
                                模态框内容..
                            </div>

                            <!-- 模态框底部 -->
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            </div>

                        </div>
                    </div>
                </div>


            </div>
            <div class="tab-pane fade" id="usr_scheduler" role="tabpanel" aria-labelledby="usr_scheduler_tab">人资源分布
            </div>
            <div class="tab-pane fade" id="device_scheduler" role="tabpanel" aria-labelledby="device_scheduler_tab">
                设备资源分布
            </div>
            <div class="tab-pane fade" id="plan_act" role="tabpanel" aria-labelledby="plan_act_tab">理论与实绩</div>
            <div class="tab-pane fade" id="scheduler" role="tabpanel" aria-labelledby="scheduler_tab">排班</div>
            <div class="tab-pane fade" id="resource_setting" role="tabpanel" aria-labelledby="resource_setting_tab">资源设定
            </div>
            <div class="tab-pane fade" id="resource_group_setting" role="tabpanel"
                 aria-labelledby="resource_group_setting_tab">资源组设定
            </div>
            <div class="tab-pane fade" id="craft" role="tabpanel" aria-labelledby="craft_tab">工艺</div>
            <div class="tab-pane fade" id="goods_bom" role="tabpanel" aria-labelledby="goods_bom_tab">工序</div>
        </div>
    </div>
</div>


<div class="modal fade modal-xl" id="chooseOrder" tabindex="-1" role="dialog" aria-labelledby="chooseOrderLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="chooseOrderLabel">排程约束设定</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>排程类型</label>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="aps_model" id="sequence"
                               value="sequence" checked>
                        <label class="form-check-label" for="sequence">
                            顺排
                        </label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="aps_model" id="reverse"
                               value="reverse">
                        <label class="form-check-label" for="reverse">
                            倒排
                        </label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="aps_model" id="insert"
                               value="insert">
                        <label class="form-check-label" for="insert">
                            插排
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label>工序加工模型</label>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="order" id="fs"
                               value="fs" checked>
                        <label class="form-check-label" for="fs">
                            FS
                        </label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="order" id="ss"
                               value="ss">
                        <label class="form-check-label" for="ss">
                            SS
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label>人产能模型</label>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="usr_capacity" id="usr_bom_capacity"
                               value="bom" checked>
                        <label class="form-check-label" for="usr_bom_capacity">
                            BOM指定
                        </label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="usr_capacity" id="usr_capacity_many"
                               value="many">
                        <label class="form-check-label" for="usr_capacity_many">
                            工序多人
                        </label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="usr_capacity" id="usr_capacity_one"
                               value="one">
                        <label class="form-check-label" for="usr_capacity_one">
                            工序单人
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label>设备产能模型</label>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="device_capacity" id="device_bom_capacity"
                               value="bom" checked>
                        <label class="form-check-label" for="device_bom_capacity">
                            BOM指定
                        </label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="device_capacity" id="device_capacity_one"
                               value="one">
                        <label class="form-check-label" for="device_capacity_one">
                            工序单设备
                        </label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="device_capacity" id="device_capacity_many"
                               value="many">
                        <label class="form-check-label" for="device_capacity_many">
                            工序多设备
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label>工序组合资源</label>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="group_resource" id="no_group"
                               value="none" checked>
                        <label class="form-check-label" for="no_group">
                            不组合
                        </label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="group_resource" id="group"
                               value="group">
                        <label class="form-check-label" for="group">
                            组合
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label>选择产线资源</label>
                    <div class="form-check-inline">
                        <select class="selectpicker" multiple title="请选择产线资源" id="exampleFormControlSelect1"
                                style="width: 200px">
                            <option>Mustard</option>
                            <option>Ketchup</option>
                            <option>Relish</option>
                        </select>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary">开始排程</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="scheduling" tabindex="-1" role="dialog" aria-labelledby="schedulingModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="schedulingModalLabel">引擎计算中</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25"
                         aria-valuemin="0" aria-valuemax="100">25%
                    </div>
                </div>
                <ul class="list-group" style="margin-top: 5px">
                    <li class="list-group-item list-group-item-expand">
                        <span>J0001</span>
                        <svg class="min-icon" aria-hidden="true">
                            <use xlink:href="#icon-ok-copy"></use>
                        </svg>
                    </li>
                    <li class="list-group-item list-group-item-expand">
                        <span>J0002</span>
                        <svg class="min-icon" aria-hidden="true" width="12" height="12">
                            <use xlink:href="#icon-ok-copy"></use>
                        </svg>
                    </li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-danger">停止引擎计算</button>
            </div>
        </div>
    </div>
</div>

</body>
<script>

    var token = 'AwnR8df32d9UTy/Q6hnuWFAeJTjoHjRpjZL37GHLidbxdC5CGP3z4LhBpoCizsyRRKxdeeOa5DUVNJlomUOSqKcJNcAbk+PUT+vUbnWlKY8=';

    window.onload = function () {
        //     var oCss = document.getElementById('css');
        //
        //     oCss.innerHTML += '.gantt_row.gantt_projecttest1,.gantt_row.odd.gantt_projecttest1{background-color: #6666FF;}';
        //     oCss.innerHTML += '.gantt_task_row.gantt_projecttest1,.gantt_task_row.odd.gantt_projecttest1{background-color: #6666FF;;}';
        //     oCss.innerHTML += '.gantt_task_line.gantt_projecttest1{background-color: #6666FF;border: 1px solid #6666FF;}';
        //     oCss.innerHTML += '.gantt_task_line.gantt_projecttest1 .gantt_task_progress{background-color: #6666FF;}';
    }

    var zoomConfig = {
        levels: [
            {
                name: 'hour',
                scale_height: 50,
                min_column_width: 50,
                scales: [
                    {unit: 'day', step: 1, format: '%m/%d'},
                    {unit: 'hour', step: 1, format: '%H:%i'}
                ]
            },
            {
                name: 'day',
                scale_height: 50,
                min_column_width: 50,
                scales: [
                    {unit: 'day', step: 1, format: '%m/%d'}
                ]
            },
            {
                name: 'week',
                scale_height: 50,
                min_column_width: 50,
                scales: [
                    {
                        unit: 'week', step: 1, format: function (date) {

                            var dateToStr = gantt.date.date_to_str('%m/%d');
                            var endDate = gantt.date.add(date, +6, 'day');

                            return dateToStr(date) + ' - ' + dateToStr(endDate);
                        }
                    },
                    {unit: 'day', step: 1, format: '%j %D'}
                ]
            },
            {
                name: 'month',
                scale_height: 50,
                min_column_width: 120,
                scales: [
                    {unit: 'month', format: '%Y/%m'},
                    {unit: 'week', format: '第 %W 周'}
                ]
            },
            {
                name: 'quarter',
                height: 50,
                min_column_width: 90,
                scales: [
                    {unit: 'month', step: 1, format: '%M'},
                    {
                        unit: 'quarter', step: 1, format: function (date) {
                            var dateToStr = gantt.date.date_to_str('%M');
                            var endDate = gantt.date.add(gantt.date.add(date, 3, 'month'), -1, 'day');
                            return dateToStr(date) + ' - ' + dateToStr(endDate);
                        }
                    }
                ]
            },
            {
                name: 'year',
                scale_height: 50,
                min_column_width: 30,
                scales: [
                    {unit: 'year', step: 1, format: '%Y'}
                ]
            }
        ]
    };

    gantt.config.date_format = '%Y-%m-%d %H:%i:S%';

    //gantt.locale.labels.deadline_enable_button = 'Set';
    //gantt.locale.labels.deadline_disable_button = 'Remove';

    //全屏组件
    gantt.plugins({
        fullscreen: true
    });
    gantt.ext.fullscreen.getFullscreenElement = function () {
        return document.getElementById('myCover');
    }

    //时间线组件
    gantt.plugins({
        marker: true
    });

    var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
    var today = new Date('2020-07-30'.replace(/-/g, '/'));

    gantt.addMarker({
        start_date: today,
        css: 'today',
        text: 'Today',
        title: 'Today: ' + dateToStr(today)
    });

    //放大缩小组件
    gantt.ext.zoom.init(zoomConfig);
    gantt.ext.zoom.setLevel('day');//设置默认显示

    gantt.config.columns = [
        {
            width: 22, template: function (obj) {
                if (obj.deadline) {
                    return '<div class="overdue-indicator">!</div>';
                } else if (obj.suspend) {
                    return '<div class="suspend-indicator">!</div>';
                }
                return '<div></div>';
            }
        },
        {name: 'text', label: 'Task name', width: '*', tree: true, resize: true},
        {name: 'start_date', label: 'Start time', align: 'center', width: 80},
        //{name: "deadline", label: "Deadline", width: 80, align: "center"},
        {name: 'duration', label: 'Duration', align: 'center', width: 60},
        {name: 'add', label: '', width: 36}
    ];

    //交期不满足组件
    /*gantt.config.lightbox.sections = [
        {name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
        {name: "time", map_to: "auto", type: "duration"},
        {
            name: "deadline", map_to: {start_date: "deadline"},
            type: "duration_optional",
            button: true,
            single_date: true
        }
    ];

    gantt.config.columns = [
        {
            name: "overdue", label: "", width: 38, template: function (obj) {
                if (obj.deadline) {
                    var deadline = gantt.date.parseDate(obj.deadline, "xml_date");
                    if (deadline && obj.end_date > deadline) {
                        return '<div class="overdue-indicator">!</div>';
                    }
                }
                return '<div></div>';
            }
        },
        {name: "text", label: "Task name", width: "*", tree: true, resize: true},
        {name: "start_date", label: "Start time", align: "center", width: 80},
        {name: "deadline", label: "Deadline", width: 80, align: "center"},
        {name: "duration", label: "Duration", align: "center", width: 60},
        {name: "add", label: "", width: 36}
    ];*/
    gantt.config.grid_width = 420;//设置左边的树宽度
    //gantt.locale.labels.section_deadline = "Deadline";

    /*gantt.addTaskLayer({
        renderer: {
            render: function draw_deadline(task) {
                if (task.deadline) {
                    var el = document.createElement('div');
                    el.className = 'deadline';
                    var sizes = gantt.getTaskPosition(task, task.deadline);

                    el.style.left = sizes.left + 'px';
                    el.style.top = sizes.top + 'px';

                    el.setAttribute('title', gantt.templates.task_date(task.deadline));
                    return el;
                }
                return false;
            },
            // define getRectangle in order to hook layer with the smart rendering
            getRectangle: function(task, view){
                if(task.deadline){
                    return gantt.getTaskPosition(task, task.deadline);
                }
                return null;
            }
        }
    });

    gantt.templates.task_class = function (start, end, task) {
        if (task.deadline && end.valueOf() > task.deadline.valueOf()) {
            return 'overdue';
        }
    };

    gantt.templates.rightside_text = function (start, end, task) {
        if (task.deadline) {
            if (end.valueOf() > task.deadline.valueOf()) {
                var overdue = Math.ceil(Math.abs((end.getTime() - task.deadline.getTime()) / (24 * 60 * 60 * 1000)));
                var text = "<b>Overdue: " + overdue + " days</b>";
                return text;
            }
        }
    };


    gantt.attachEvent("onTaskLoading", function (task) {
        if (task.deadline)
            task.deadline = gantt.date.parseDate(task.deadline, "xml_date");
        return true;
    });*/

    /*甘特条的背景色*/
    gantt.templates.task_class = function (st, end, item) {
        if (item.updateStyle == 1) {
            return 'gantt_projecttest1';
        } else {
            return 'gantt_projecttest1';
        }

    };

    //甘特图全局设置
    gantt.config.row_height = 24;//设置甘特条高度
    gantt.config.scale_height = 30;//设置第一行时间轴的高度
    //gantt.config.preserve_scroll = true;
    //gantt.config.initial_scroll = false;
    //gantt.config.static_background = true;//处理较大的日期范围
    //gantt.config.smart_rendering = true;//开启智能渲染

    //gantt.config.order_branch = true;
    //gantt.config.order_branch_free = true;
    gantt.config.branch_loading = true;

    // var api = new Api();

    gantt.init('gantt_here');

    gantt.ajax.get({
        url: "http://localhost:9090/api/aps/getOrderScheduling",
        headers: {
            "token": token,
            "Content-Type": "application/json"
        }
    }).then(function (response) {
        var data = JSON.parse(response.responseText);
        var flag = api.parseResponse(data);
        if (flag) {
            gantt.parse(data.data)
        } else {
            alert('错误提示');
        }
    });

    gantt.attachEvent('onTaskCreated', function (task) {
        //alert('onTaskCreated');
        //task.userId = currentUser;
        alert('onTaskCreated');
        return true;
    });

    gantt.attachEvent('onBeforeBranchLoading', function (settings) {
        //alert('onBeforeBranchLoading')
        //alert(JSON.stringify(settings));
        //var task = gantt.getTask(settings.taskId);
        //config.url += "&value=" + encodeURIComponent(task.text);
        alert('onBeforeBranchLoading');
        return true;
    });

    //双击事件
    gantt.attachEvent('onTaskDblClick', function (id, e) {
        //any custom logic here
        alert('onTaskDblClick')
        return true;
    });

    //右击甘特图事件 04_customization/10_context_menu.html
    gantt.attachEvent('onContextMenu', function (taskId, linkId, event) {
        var element = event.target;
        alert('onContextMenu');
        return true;
    });

    //单击左边的菜单事件
    gantt.attachEvent('onTaskRowClick', function (id, row) {
        //alert('onTaskRowClick');
        //any custom logic here
        return true;
    });

    //单击标题事件
    gantt.attachEvent('onGridHeaderClick', function (name, e) {
        //any custom logic here
        alert('onGridHeaderClick');
        return true;
    });

    gantt.attachEvent('onTaskClick', function (id, e) {
        //any custom logic here
        //alert('onTaskClick');
        return true;
    });

    //添加链接层
    // gantt.addLinkLayer(function (link) {
    //     let node = gantt.getLinkNode(link.id)
    //     if (node) {
    //         var el = document.createElement('div');
    //         el.className = 'link_layer';
    //         el.style.left = node.childNodes[2].offsetLeft + 'px'
    //         el.style.width = 25 + 'px'
    //         el.style.top = node.childNodes[2].offsetTop + 'px'
    //         el.style.height = 25 + 'px'
    //         return el;
    //     }
    //     return false;
    // });


    gantt.attachEvent("onTaskOpened", function (id) {
        gantt.ajax.get({
            url: "http://localhost:9090/api/aps/getOrderTask/" + id,
            headers: {
                "token": token,
                "Content-Type": "application/json"
            }
        }).then(function (response) {
            var data = JSON.parse(response.responseText);
            var flag = api.parseResponse(data);
            if (flag) {
                data = data.data;
                // gantt.addTask(data, id, 0);
                for (var i = 0; i < data.length; i++) {
                    gantt.addTask(data[i], id, i);
                }
            } else {
                alert('错误提示');
            }

        });
    });


    gantt.attachEvent("onTaskSelected", function (id) {
        alert('onTaskSelected');
    });


    function zoomIn() {
        gantt.ext.zoom.zoomIn();
    }

    function zoomOut() {
        gantt.ext.zoom.zoomOut()
    }

    function convertDateFromString(dateString) {
        if (dateString) {
            var date = new Date(dateString.replace(/-/, '/'))
            return date;
        }
    }

    function submitTask() {

    }

    function openGantt() {
        gantt.open('1');
    }

    function closeGantt() {
        gantt.close('1');
    }

    function chooseOrder() {
        $('#chooseOrder').modal('show')

    }

    function start() {
        $('#scheduling').modal('show')
    }

    function end() {

    }

    function zoom(type) {
        alert(type)
    }

    function save() {

    }

    var currentScreen = 'min';

    function fullScreen() {
        if (currentScreen == 'min') {
            currentScreen = 'max';
            document.getElementById('fullScreenSvg').innerHTML = '<use xlink:href="#icon-suofang"></use>';
        } else {
            currentScreen = 'min';
            document.getElementById('fullScreenSvg').innerHTML = '<use xlink:href="#icon-quanping"></use>';
        }

    }

    gantt.attachEvent('onExpand', function () {
        alert('onExpand');
        gantt.ext.fullscreen.toggle();
    })

    gantt.attachEvent('onCollapse', function () {
        alert('onCollapse');
    })

    function esc() {
        alert('fff');
        // if (currentScreen == 'max') {
        //     alert('');
        //     document.getElementById('fullScreenSvg').innerHTML = '<use xlink:href="#icon-quanping"></use>';
        //     gantt.ext.fullscreen.toggle();
        // }
    }

    function usrScheduler() {
        $('#usr_scheduler').load('01_multiple_scales.html');
        //
    }

    //https://blog.csdn.net/CX_silent/article/details/83589451
    //https://docs.dhtmlx.com/gantt/desktop__tree_column.html
    //https://blog.csdn.net/qq_24472595/article/details/81630117?utm_source=blogxgwz1
    //https://docs.dhtmlx.com/gantt/desktop__server_side.html
    //https://docs.dhtmlx.com/gantt/samples/02_extensions/06_dynamic_loading.html
    //https://docs.dhtmlx.com/gantt/api__gantt_addtask.html 添加任务
    //https://docs.dhtmlx.com/gantt/api__gantt_autoschedule.html 自动排程
    //https://docs.dhtmlx.com/gantt/api__refs__gantt.html 官方文档
    //https://docs.dhtmlx.com/gantt/api__refs__gantt_events.html 事件
    //https://blog.csdn.net/Marksunshine/article/details/83867862
    //https://blog.csdn.net/CX_silent/article/details/83151415

    /*data - 定义甘特图中的任务
      　id - (string, number)任务id
      　start_date - (Date)任务开始日期
      　text - (string)任务描述
      　progress - (number) 任务完成度，0到1
      　duration - (number) 在当前时间刻度下的任务持续周期
      　parent - (number) 父任务的id
      links - 定义甘特图中的任务关联线
      　id - (string, number) 关联线id
      　source - (number) 数据源任务的id
      　target - (number) 目标源任务的id
      　type - (number) 关联线类型：0 - “结束到开始”，1 - “开始到开始”，2 - “结束到结束” */

    //ontask事件如何指定tree触发还是甘特图触发？

</script>
